<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：条件渲染
        v-if='表达式' 写法和 效果参考 if else语法类似
        v-if可以和v-else-if一起使用但是 中间不能被其他标签隔开
        不满足条件的DOM会被直接移除

        v-show='表达式'
        不展示的DOM元素不会被移除，类似display:none隐藏了，所以
        隐藏的情况下还是可以获取元素的。而v-if则可能获取不到

        template标签不影响结构，页面html解析后不会有此标签，但只能
        配合v-if使用，不能配合v-show
    -->
    <div id="demo">
        
        <button @click="btn">点击显示信息</button>
        <h2 v-if="n === 1">{{name}}{{n}}</h2>
        <h2 v-else-if="n === 2">{{name}}{{n}}</h2>
        <h2 v-else="n === 3">{{name}}{{n}}</h2>
        <h2 v-show="flag">{{name}}</h2>
        <template v-if = "n===1">
            <h2>aa</h2>
            <h2>bb</h2>
            <h2>cc</h2>
        </template>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        new Vue({
            el:"#demo",
            data:{
                name:"你好",
                n:0,
                flag:false,
                a:0           
            },
            methods: {
                btn(){
                    this.flag = !this.flag                    
                    this.n = this.a % 3
                    this.a ++
                }
            },
        })
    </script>
</body>
</html>